<template>
  <PageContainer>
    <Header title="单位详情">
      <!-- 单位信息头部 -->
      <view class="hb-p-4">
        <view class="hb-flex">
          <view class="hb-shrink-0 hb-mr-3">
            <t-image
              width="96rpx"
              height="96rpx"
              border-radius="12rpx"
              :src="companyDetail.logo"
            ></t-image>
          </view>
          <view class="hb-flex-1">
            <view class="hb-text-sm hb-font-bold hb-mb-2">{{ companyDetail.name }}</view>
            <view class="hb-flex hb-gap-1 hb-mb-2 hb-overflow-hidden">
              <RoleTag
                v-for="(tag, index) in companyDetail.mainBusinessList?.slice(0, 3)"
                :key="index"
                :text="tag"
                type="member"
              />
            </view>
          </view>
        </view>
        <view class="hb-flex hb-items-center hb-text-xs hb-text-[#969799] hb-mt-3">
          <tm-icon name="ali-icon icon-address" :font-size="32" color="#969799"></tm-icon>
          <text class="hb-ml-1">{{ companyDetail.address }}</text>
        </view>
      </view>
    </Header>
    <view class="hb-p-4">
      <view class="hb-p-4 hb-bg-white hb-rounded-xl">
        <!-- 关联智能助手 -->
        <view class="hb-mb-7">
          <view class="hb-flex hb-justify-between hb-items-center hb-mb-3">
            <view class="hb-text-[32rpx] hb-font-bold">关联智能助手</view>
            <view
              class="hb-flex hb-items-center hb-gap-1 hb-bg-[#2878FF] hb-px-2 hb-py-1 hb-rounded-[24rpx]"
              @click="handleClick"
            >
              <tm-icon name="ali-icon icon-main_comment" :font-size="24" color="#FFF"></tm-icon>
              <text class="hb-text-[24rpx] hb-text-white">对话</text>
            </view>
          </view>
          <view class="hb-flex hb-p-3 hb-border hb-border-[#EBEDF0] hb-rounded-[16rpx]">
            <view class="hb-mr-2">
              <t-image
                width="80rpx"
                height="80rpx"
                border-radius="50%"
                :src="companyDetail.appBotInfoVo?.iconFileUrl"
              ></t-image>
            </view>
            <view class="hb-flex-1">
              <view class="hb-text-xs hb-leading-5 hb-font-bold hb-mb-1">
                {{ companyDetail.appBotInfoVo?.name }}
              </view>
              <view class="hb-flex hb-items-center hb-gap-2">
                <RoleTag
                  v-if="companyDetail.position"
                  :text="companyDetail.position"
                  type="superAdmin"
                />
                <AuthenticationTag :type="companyDetail.appBotInfoVo?.certificationType" />
              </view>
            </view>
          </view>
        </view>
        <!-- 单位介绍 -->
        <view v-if="companyDetail.description" class="hb-mb-7">
          <view class="hb-flex hb-justify-between hb-items-center hb-mb-3">
            <view class="hb-text-[32rpx] hb-font-bold">单位介绍</view>
          </view>
          <view class="hb-leading-relaxed hb-text-gray-800">
            <tm-text
              :label="companyDetail.description"
              :font-size="28"
              color="#646566"
              :line-height="40"
            ></tm-text>
          </view>
        </view>

        <!-- 主营业务 -->
        <view v-if="companyDetail.mainBusinessList?.length">
          <view class="hb-flex hb-justify-between hb-items-center hb-mb-3">
            <view class="hb-text-[32rpx] hb-font-bold">主营业务</view>
          </view>
          <view class="hb-flex hb-flex-wrap hb-gap-3">
            <view
              v-for="(business, index) in companyDetail.mainBusinessList"
              :key="index"
              class="hb-px-3 hb-py-1 hb-text-[28rpx] hb-bg-[#D0F7FF] hb-leading-5 hb-rounded-[8rpx] hb-text-[#2878FF]"
            >
              {{ business }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* unitDetail 单位详情 */
  import { ref } from 'vue';
  import RoleTag from '@/components/RoleTag/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { getBotCompanyCardById } from '@/api/card';
  import { BotCompanyInfo } from '@/api/card/type';
  const uuid = ref<string>('');
  customOnload<'CompanyDetail'>((options) => {
    uuid.value = options.uuid;
    getCompanyDetail();
  });

  const companyDetail = reactive<BotCompanyInfo>({} as BotCompanyInfo);

  const getCompanyDetail = async () => {
    const res = await getBotCompanyCardById(uuid.value);
    companyDetail.name = res.name;
    companyDetail.logo = res.logo;
    companyDetail.mainBusinessList = res.mainBusinessList;
    companyDetail.address = res.address;
    companyDetail.description = res.description;
    companyDetail.appBotInfoVo = res.appBotInfoVo;
    companyDetail.position = res.position;
  };
  const handleClick = () => {
    navigateTo({
      name: 'aiChatPage',
      options: {
        uuid: companyDetail.appBotInfoVo?.uuid,
      },
    });
  };
</script>

<style lang="scss" scoped>
  /* 使用WindCSS，样式已通过类名应用 */
</style>
